<template>
	<view>
		<view class="uni-header">
			<uni-stat-breadcrumb class="uni-stat-breadcrumb-on-phone" />
			<view class="uni-group">
				<button class="uni-button" type="primary" size="mini" @click="update()">新增</button>
			</view>
		</view>
		<view class="uni-container">
			<uni-table border stripe emptyText="暂无更多数据">
				<!-- 表头行 -->
				<uni-tr>
					<uni-th align="center">服务器名称</uni-th>
					<uni-th align="center">服务器地址</uni-th>
					<uni-th align="center">服务器类型</uni-th>
					<uni-th align="center">服务器创建时间</uni-th>
					<uni-th align="center">服务器过期时间</uni-th>
					<uni-th align="left">操作</uni-th>
				</uni-tr>
				<!-- 表格数据行 -->
				<uni-tr v-for="(item,key) in tableData">
					<uni-td>{{item.name}}</uni-td>
					<uni-td>{{item.url}}</uni-td>
					<uni-td>{{item.type}}</uni-td>
					<uni-td>
						{{item.newdate | timeOut(item.newdate)}}
					</uni-td>
					<uni-td>
						{{item.outdate | timeOut(item.outdate)}}
					</uni-td>
					<uni-td>
						<button @click="update(item)" class="mini-btn" style="margin-right: 20px;" type="primary" size="mini">修改</button>
						<button @click="del(item._id)" class="mini-btn" type="warn" size="mini">删除</button>
					</uni-td>
				</uni-tr>
			</uni-table>
			
			<uni-popup class="PP" ref="popup" type="center">
				<view class=""
					style="background-color: #fff;border-radius: 10rpx;padding: 20rpx;margin: auto;">
					<view class="" style="padding-top: 20px;text-align: center;font-weight: 400;width: auto;margin-bottom: 20rpx;">
						{{title}}
					</view>
					<uni-forms :modelValue="fromData">
						<uni-forms-item label="服务器名称:" :label-width="formLabelWidth">
							<input type="text"  v-model="fromData.name" placeholder=" ~ ~ ~"/>
						</uni-forms-item>
						<uni-forms-item label="服务器地址:" :label-width="formLabelWidth">
							<input type="text"  v-model="fromData.url" placeholder=" ~ ~ ~"/>
						</uni-forms-item>
						<uni-forms-item label="服务器类型:" :label-width="formLabelWidth">
							<input type="text"  v-model="fromData.type" placeholder=" ~ ~ ~"/>
						</uni-forms-item>
						
						<uni-forms-item label="过期时间:" :label-width="formLabelWidth">
							<div class="block">
								<uni-datetime-picker :value="fromData.value1*1000" v-model="fromData.value1" type="timestamp"
									placeholder="选择日期时间" >
								</uni-datetime-picker>
							</div>
						</uni-forms-item>
						<uni-forms-item label="过期时间:" :label-width="formLabelWidth">
							<div class="block">
								<uni-datetime-picker :value="fromData.value2*1000" v-model="fromData.value2" type="timestamp"
									placeholder="选择日期时间" >
								</uni-datetime-picker>
							</div>
						</uni-forms-item>
					
					</uni-forms>
					<view class="dialog-footer" style="margin: auto;display: flex;padding-bottom: 20rpx;">
						<button @click="ClessPP" type="default" size="mini">取 消</button>
						<button @click="updateData" type="primary" size="mini">确 定</button>
					</view>
				</view>
			</uni-popup>
		</view>
	</view>
</template>

<script>
	import dayjs from 'dayjs'
	const db = uniCloud.database();
	export default {
		created() {
			this.getServiceList();
		},
		methods: {
			OpenPP() {
				this.$refs.popup.open()
			},
			ClessPP() {
				this.$refs.popup.close()
			},
			handleClose(done) {
				this.$confirm('确认关闭？')
					.then(_ => {
						done();
					})
					.catch(_ => {});
			},
			del(val) {
				this.$confirm('确认删除？')
					.then(_ => {
						db.collection('service_url').where({
							'_id': val
						}).remove().then((res) => {
							this.$message({
								message: '删除成功',
								type: 'success'
							});
							this.getServiceList()
						})
						done();
					})
					.catch(_ => {});
			},
			update(val) {
				if (val) {
					this.title = '修改'
					this.fromData = {
						...val,
						'value1': dayjs(val.newdate * 1000).format("YYYY-MM-DD  HH:mm:ss"),
						'value2': dayjs(val.outdate * 1000).format("YYYY-MM-DD  HH:mm:ss")
					}
				} else {
					this.title = '新增'
					this.fromData = {}
				}
				this.OpenPP()
			},
			updateData() {
				if (!this.fromData._id) {
					this.fromData.newdate = dayjs(this.fromData.value1).unix()
					this.fromData.outdate = dayjs(this.fromData.value2).unix()
					db.collection('service_url').add({
						name: this.fromData.name,
						url: this.fromData.url,
						type: this.fromData.type,
						newdate: this.fromData.newdate,
						outdate: this.fromData.outdate
					}).then((res) => {
						this.ClessPP()
						this.$message({
							message: '新增成功',
							type: 'success'
						});
						this.getServiceList()
					})
				} else {
					this.fromData.newdate = dayjs(this.fromData.value1).unix()
					this.fromData.outdate = dayjs(this.fromData.value2).unix()
					db.collection('service_url').where({
						'_id': this.fromData._id
					}).update({
						name: this.fromData.name,
						url: this.fromData.url,
						type: this.fromData.type,
						newdate: this.fromData.newdate,
						outdate: this.fromData.outdate
					}).then((res) => {
						this.ClessPP()
						this.$message({
							message: '修改成功',
							type: 'success'
						});
						this.getServiceList()
					})
				}
			},
			tableRowClassName({
				row,
				rowIndex
			}) {
				if (rowIndex === 1) {
					return 'warning-row';
				} else if (rowIndex === 3) {
					return 'success-row';
				}
				return '';
			},
			getServiceList() {
				db.collection('service_url').get().then((res) => {
					this.tableData = res.result.data
				})
			}
		},
		data() {
			return {
				tableData: [],
				username: "",
				fromData: {},
				show: false,
				formLabelWidth: '120px',
				value1: undefined,
				title: "默认"
			}
		}
	}
</script>

<style scoped>
	>>> .uni-forms-item__content,.uni-forms-item{
		position: unset;
	}
	>>> .PP>.uni-date-picker__container{
		/* transform: translate(50%);
		top: -50%; */
	}
	input{
		background-color: aliceblue;
		padding: 10px;
	}
</style>